@import "./yxflex.less"; // flex布局

.main_wrap {
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
  //overflow-x: hidden;
  overflow: hidden;


  .result_card {
    background-color: #f6f6f6;
    border: 0;
    box-shadow: none;
    height: calc(100% - 50px);

    /deep/ .el-card__body {
      padding: 0;
      height: 100%;
    }
  }

  .result_search {
    padding: 2%;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;

    .result_search_item {
      width: 100%;
      margin: 5px 0;
      padding: 0;
      //display: flex;
      .flex;
      box-sizing: border-box;
    }
  }

  .result_list {
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;

    .result_empty {
      width: 100%;
      height: 50px;
      line-height: 50px;
      //margin: auto;
      text-align: center;
    }

    .result_ul {
      width: 100%;
      overflow: auto;

      ul {
        width: 100%;
        padding: 2%;
        box-sizing: border-box;
        margin-bottom: 5%;

        .result_li {
          width: 100%;
          margin-bottom: 10px;
          box-sizing: border-box;
          padding-right: 2%;
          padding-bottom: 8px;
          border-radius: 5px;
          box-sizing: border-box;
          background-color: #fff;

          .result_li_name_time {
            width: 100%;
            //display: flex;
            .flex;
            box-sizing: border-box;
            //align-items: center;
            .flex-align-center;
            margin-bottom: 2%;
            margin-top: 5px;

            .result_li_name {
              //flex: 1;
              .flex-1;
              //width: calc(100% - 30%);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              //display: flex;
              //flex-direction: row;
              //align-items: center;
              .flex;
              .flex-row;
              .flex-align-center;

              .dot_span {
                display: inline-block;
                width: 4px;
                height: 16px;
                background-color: #409eff;
                margin-right: 5px;
              }

              .result_li_name_text {
                width: 90%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #2686fe;
                font-size: 16px;
                font-weight: bold;
              }
            }

            .result_li_time {
              //display: flex;
              //flex-direction: row;
              //align-items: center;
              .flex;
              .flex-row;
              .flex-align-center;

              font-size: 13px;
              //justify-content: flex-end;
              .flex-justify-end;
              max-width: 160px;

              .dot_span {
                display: inline-block;
                width: 4px;
                height: 4px;
                background-color: #409eff;
                margin-right: 5px;
                border-radius: 50%;
              }

              .time_span {
                font-size: 12px;
                padding: 0px 3px;
                border: solid 1px #dfdfdf;
                background-color: #fafafa;
                color: #828a8d;
                border-radius: 2px;
                box-sizing: border-box;
              }
              .view_span{
                padding: 0px 3px;
                border: solid 1px #f1f5fe;
                background-color: #f1f5fe;
                color: #65a5fd;
                border-radius: 2px;
                box-sizing: border-box;
                cursor: pointer;
                font-size: 12px;
                margin-left: 5px;
              }
            }

          }


          .result_li_tag {
            font-size: 12px;
            //display: flex;
            //justify-content: flex-end;
            //align-items: center;
            .flex;
            .flex-justify-end;
            .flex-align-center;
            margin-bottom: 15px;


          }

          .result_li_date {
            margin-top: 5%;
            //display: flex;
            .flex;

            .result_li_date_item {
              width: 24%;
              margin: auto;
              text-align: center;
              //display: flex;
              //flex-direction: column;
              //align-items: center;
              .flex;
              .flex-column;
              .flex-align-center;


              .result_li_date_item_icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                text-align: center;
                line-height: 40px;
                margin-bottom: 12px;
                color: #666;
              }

              .total {
                background: linear-gradient(45deg, black, transparent);
                color: #fff;
              }

              .today {
                background: linear-gradient(45deg, #0f5fed, transparent);
                color: #fff;
              }

              .lastday {
                background: linear-gradient(45deg, #9a43ed, transparent);
                color: #fff;
              }

              .before_lastday {
                background: linear-gradient(45deg, #d521e9, transparent);
                color: #fff;
              }
            }

            ul {
              margin-top: 3%;
              border-bottom: 1px solid #f0f0f0;
              //justify-content: space-between;
              //-moz-align-items: center;
              //align-items: center;

              .flex-justify-between;
              .flex-align-center;
              width: 100%;
              box-sizing: border-box;

              p {
                display: inline-block;
                width: 25%;
                font-size: 14px;
                text-align: center;
                height: 36px;
                line-height: 36px;
              }

              li {
                width: 100%;
                box-sizing: border-box;
              }

              .result_li_date_header {

                p:nth-child(1) {
                  background-color: rgb(254, 240, 240);
                }

                p:nth-child(2) {
                  background-color: rgb(240, 249, 235);
                }

                p:nth-child(3) {
                  background-color: #e6eefb;
                }

                p:nth-child(4) {
                  background-color: #b5cbcb;
                }
              }
            }
          }
        }
      }

    }
  }


}



.result_info {
  width: 100%;
  overflow: auto;
  background-color: white;
  //padding: 4%;
  box-sizing: border-box;

  .result_search_time{
    width: 100%;
    margin: 10px 0;
    padding: 0;
    //display: flex;
    .flex;
    box-sizing: border-box;
  }

  .result_sum {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 10px;
  }

  ul {
    width: 100%;
    box-sizing: border-box;

    p {
      display: inline-block;
      width: 50%;
      font-size: 14px;
      text-align: center;
      height: 36px;
      line-height: 36px;
    }

    .result_li_header {
      p:nth-child(1) {
        background-color: #e6eefb;
      }

      p:nth-child(2) {
        background-color: #eaf6ec;
      }
    }


    .item_width_32{
      margin-left: 1%;
      p{
        width: 32%;
        border-radius: 5px;
      }
    }
  }
}
.clue_item {
  width: 96%;
  margin-left: 2%;

  .result_li_header {
    width: 100%;
    display: flex;
    margin: 10px 0;

    .item_width_33 {
      width: 33%;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
    }

    .item_width_21 {
      width: 21%;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
    }

    .bolde_num {
      font-size: 16px;
    }
  }
}

/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */

@media screen and (min-width: 320px) and (max-width: 375px) {
  .result_li_date_item_icon {
    width: 36px!important;
    height: 36px!important;
    line-height: 36px!important;
  }
}
